<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页组件文档 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../../../layui/css/layui.css"   media="all">
  <link rel="stylesheet" href="../../../css/Global.css"  media="all">
  
</head>
<body>
<div class="layui-header header header-doc">
  <div class="layui-main">
    <a class="logo" href="../../index.html">
      <img src="../../../res.layui.com/images/layui/logo.png" alt="layui">
    </a>
    <ul class="layui-nav">
      <li class="layui-nav-item layui-this">

      </li>
      <li class="layui-nav-item ">

      </li>
      
      <li class="layui-nav-item">

      </li>
    </ul>
  </div>
</div>
<!-- <ul class="site-dir">
  <li><a href="#use"><cite>使用</cite></a></li>
</ul> -->
<div class="layui-main site-inline">
  <div class="site-tree">
  <ul class="layui-tree">
  
    <li><h2>基础说明</h2></li>
  
    <li class="site-tree-noicon ">
      <a href="../index.html" ><cite>开始使用</cite></a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/infrastructure.html" >
        <cite>底层支撑</cite>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/element.html" >
        <cite>页面元素</cite>
        <em>规范 / 公共类、属性</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/modules.html" >
        <cite>组件规范</cite>
        <em>使用 / 模块扩展</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../base/faq.html">
        <cite>常见问题</cite>
      </a>
    </li>
    
    <li><h2>页面元素</h2></li>
    
    
    
    <li class="site-tree-noicon ">
      <a href="../element/color.html">
        <cite>颜色</cite>
        <em>内置的色值参考</em>
      </a>
    </li>
    
    <li class="site-tree-noicon ">
      <a href="../element/icon.html">
        <cite>图标</cite>
        <em>字体图标</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/auxiliar.html">
        <cite>辅助</cite>
        <em>引用 / 分块 / 横线…</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/button.html" >
        <cite>按钮</cite>
        <em>button组</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/form.html">
        <cite>表单</cite>
        <em>form元素集合</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/nav.html">
        <cite>导航</cite>
        <em>菜单 / Tab / 面包屑 …</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/table.html">
        <cite>表格</cite>
        <em>table - v1.0.5 新增</em>
      </a>
    </li>
   
    
    <li><h2>内置组件</h2></li>
    
    <li >
      <a href="layer.html">
        <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
        <em>layer</em>
      </a>
    </li>
    <li >
      <a href="layim.html">
        <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
        <cite>即时通讯</cite>
        <em>layim</em>
      </a>
    </li>
    <li >
      <a href="laydate.html">
        <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期时间选择</cite>
        <em>laydate</em>
      </a>
    </li>
    <li class="layui-this">
      <a href="laypage.html">
        <i class="layui-icon">&#xe633;</i><cite>分页</cite>
        <em>laypage</em>
      </a>
    </li>
    <li >
      <a href="laytpl.html">
        <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
        <em>laytpl</em>
      </a>
    </li>
    <li >
      <a href="layedit.html">
        <i class="layui-icon">&#xe639;</i>
        <cite>富文本编辑器</cite>
        <em>layedit</em>
      </a>
    </li>
    <li >
      <a href="form.html">
        <i class="layui-icon" style="top: 2px;">&#xe63c;</i>
        <cite>表单</cite>
        <em>form</em>
      </a>
    </li>
    <li >
      <a href="upload.html">
        <i class="layui-icon">&#xe62f;</i>
        <cite>文件上传</cite>
        <em>upload</em>
      </a>
    </li>
    <li >
      <a href="element.html">
        <i class="layui-icon" style="top: 1px; font-size: 18px;">&#xe62a;</i>
        <cite>常用元素操作</cite>
        <em>element</em>
      </a>
    </li>
    <li >
      <a href="tree.html">
        <i class="layui-icon">&#xe62e;</i>
        <cite>树形菜单</cite>
        <em>tree</em>
      </a>
    </li>
    
    <li >
      <a href="util.html">
        <i class="layui-icon">&#xe631;</i>
        <cite>工具块</cite>
        <em>util</em>
      </a>
    </li>
    <li >
      <a href="flow.html">
        <i class="layui-icon">&#xe636;</i>
        <cite>流加载</cite>
        <em>flow</em>
      </a>
    </li>
    <li >
      <a href="code.html">
        <i class="layui-icon" style="top: 1px;">&#xe635;</i>
        <cite>代码修饰器</cite>
        <em>code</em>
      </a>
    </li>
  </ul>
</div>

  <div class="site-content">
    <h1 class="site-h1"><i class="layui-icon">&#xe633;</i>分页组件文档 - layui.laypage</h1>
    <div class="site-tips site-text">
      <p>和layDate的第一个版本几乎同时间推出，由于几乎没有什么BUG，且功能基本比较完备，所以更新得也比较少。如今已经作为Layui的分页模块，并也将在后续进行一次优化，<em>届时layPage将不再作为独立组件而维护</em>。</p>
    </div>
    <div class="site-tips site-text">
      <p>模块加载名称：<a>laypage</a>，layPage在线演示：<a href="../../demo/laypage.html"  target="_blank">http://www.layui.com/demo/laypage.html</a></p>
    </div>
    
    
<div style="margin: 15px 0; text-align: center; background-color: #F2F2F2;">
  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="9841027833"></ins>
</div>

    
    <div class="site-title">
      <fieldset><legend><a name="use">全部参数</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>语法：<a>layui.laypage(settings)</a></p>
    
      <table class="site-table">
        <tbody>
          <tr>
            <th style="width:30%;">参数</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><i>settings</i></td>
            <td>
              <p>部分必填，比分可选。用于配置laypage的键值对集合。</p>
            </td>
          </tr>
        </tbody>
      </table>
      
      <table class="site-table">
        <tbody>
          <tr>
            <th style="width:15%;">键</th>
            <th style="width:15%;">默认值</th>
            <th style="width:20%;">类型</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>cont</td>
            <td>必填</td>
            <td>String/Object</td>
            <td style="text-align:left;">
              容器。值可以传入元素id或原生DOM或jquery对象，如：
              <pre run="false">
  cont: 'id'
  //cont: document.getElementById('id')
  //cont: $('#id')</pre>
            </td>
          </tr>
          
          <tr>
            <td>pages</td>
            <td>必填</td>
            <td>Number</td>
            <td style="text-align:left;">
              分页数。一般通过服务端返回得到
            </td>
          </tr>
          
          <tr>
            <td>curr</td>
            <td>1</td>
            <td>Number</td>
            <td style="text-align:left;">
              当前页。
            </td>
          </tr>
          
          <tr>
            <td>groups</td>
            <td>5</td>
            <td>Number</td>
            <td style="text-align:left;">
              连续分页数。
            </td>
          </tr>
          
          <tr>
            <td>skin</td>
            <td>default</td>
            <td>String</td>
            <td style="text-align:left;">
              控制分页皮肤。一般传16进制色值即可，如:
              <pre run="false">
skin: '#c00'</pre>
              当然，您还可以借助自定义皮肤
            </td>
          </tr>
          
          <tr>
            <td>first</td>
            <td>1</td>
            <td>Number/String/Boolean</td>
            <td style="text-align:left;">
              用于控制首页。值支持三种类型。<br>
              如：first: '首页'
              如：first: false，则表示不显示首页项
              
            </td>
          </tr>
          
          <tr>
            <td>last</td>
            <td>总页数</td>
            <td>Number/String/Boolean</td>
            <td style="text-align:left;">
              用于控制尾页。值支持三种类型<br>
              如：last: '尾页'
              如：last: false，则表示不显示首页项
            </td>
          </tr>
          
          <tr>
            <td>prev</td>
            <td>上一页</td>
            <td>String/Boolean</td>
            <td style="text-align:left;">
              用于控制上一页。若不显示，设置false即可
            </td>
          </tr>
          
          <tr>
            <td>next</td>
            <td>下一页</td>
            <td>String/Boolean</td>
            <td style="text-align:left;">
              用于控制下一页。若不显示，设置false即可
            </td>
          </tr>
          
          <tr>
            <td>skip</td>
            <td>false</td>
            <td>Boolean</td>
            <td style="text-align:left;">
              是否显示跳转
            </td>
          </tr>
          
          <tr>
            <td>hash</td>
            <td>undefined</td>
            <td>任意</td>
            <td style="text-align:left;">
              hash名，如果填写，则开启location.hash。触发分页时，会自动对url追加#!hash名={curr}<br>
              利用这个，可以在页面载入时就定位到指定页
            </td>
          </tr>
          
          <tr>
            <td>jump</td>
            <td><strong>核心参数</strong></td>
            <td>Function</td>
            <td style="text-align:left;">
              触发分页后的回调，函数返回两个参数。<br>
              obj是一个object类型。包括了分页的所有配置信息。<br>
              first一个Boolean类，检测页面是否初始加载。非常有用，可避免无限刷新。<br>
              <pre run="false">
  jump: function(obj, first){
    //得到了当前页，用于向服务端请求对应数据
    var curr = obj.curr;
  }</pre>
            </td>
          </tr>
        </tbody>
      </table>
    </div> 
 
    
    <div class="site-title">
      <fieldset><legend><a name="other">温馨提示</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>由于也是从之前的独立组件直接移入到layui，所以暂时不对其做详细介绍。在后面对laypage的重写中，本页也会重新编写。</p>
    </div>
    
    <div class="layui-elem-quote">
  <p>Layui - 用心与你沟通</p>
</div>
    
  </div>
</div>
  
<div class="layui-footer footer footer-doc">
  <div class="layui-main">
    <p>2017 &copy; <a href="../../index.html">layui.com</a> MIT license</p>
    <p>
      <a href="../../../fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
      <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
      <a href="mailto:xianxin@layui.com">合作联系</a>
      <a href="../../../github.com/sentsin/layui/index.html" target="_blank">Git仓库</a>
      <a href="../../../fly.layui.com/jie/2461.html"  target="_blank">微信公众号</a>
    </p>
  </div>
</div>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../../../layui/layui.js" charset="utf-8"></script>
<script src="../../Js/doc.js" type="text/javascript"></script>

</body>
</html>